import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import TableComponent from './user';
import User2 from './user2';
import Item from 'antd/es/list/Item';
import User3 from './user3';
const { Sider, Content } = Layout;

const Home = () => {
  const [selectedKey, setSelectedKey] = useState('1');

  const handleMenuClick = ({ key }) => {
    setSelectedKey(key);
  };
  
  const People =()=>{
    if(selectedKey==='1'){
      return <TableComponent/>
    }
    else if(selectedKey==='2')
    {
      return <User2/>
    }
    else{
      return <User3/>
    }
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <Menu theme="dark" mode="inline" selectedKeys={[selectedKey]} onClick={handleMenuClick}>
          <Menu.Item key="1">所有用户</Menu.Item>
          <Menu.Item key="2">所有商品</Menu.Item>
          <Menu.Item key="3">统计注册用户和商品</Menu.Item>
          {/* Add more menu items as needed */}
        </Menu>
      </Sider>
      <Layout>
        <Content>
          {/* {
          // selectedKey === '1' ? <TableComponent/> : <User2/>
          selectedKey==='1' 
          
          } */}
          <People/>
          
        
        </Content>
        {/* Add more content components and conditions as needed */}
      </Layout>
    </Layout>
  );
};
export default Home